<template>
    <v-layout>
        <template slot="header"> 翻页时钟 </template>
        <template slot="content">
            <div class="exmple-box">
                <div class="flip-container">
                    <div
                        class="flip-items"
                        v-for="(unit, unitIndex) of timeArr"
                        :key="unitIndex"
                    >
                        <div
                            class="item"
                            v-for="(item, index) of unit.max + 1"
                            :key="index"
                            :class="{
                                current: unit.current == index,
                                past:
                                    unit.current - 1 == index ||
                                    (index == unit.max && unit.current == 0),
                            }"
                        >
                            <div class="up">
                                <div class="inner">{{ index }}</div>
                                <div class="shadow"></div>
                            </div>
                            <div class="down">
                                <div class="inner">{{ index }}</div>
                                <div class="shadow"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </v-layout>
</template>

<script>
import vLayout from "@/components/vLayout";

export default {
    components: {
        vLayout,
    },
    data() {
        return {
            timeStr: "",
            timeRunner: null,
        };
    },
    computed: {
        timeArr() {
            return [...this.timeStr].map((unit, index) => {
                let max;
                switch (index) {
                    case 0:
                        max = 2;
                        break;
                    case 1:
                        max = 9;
                        break;
                    case 2:
                        max = 5;
                        break;
                    case 3:
                        max = 9;
                        break;
                    case 4:
                        max = 5;
                        break;
                    case 5:
                        max = 9;
                        break;
                }
                return {
                    max,
                    current: Number(unit),
                };
            });
        },
    },
    methods: {
        getTimeStr() {
            let time = new Date();
            let hour = ("00" + time.getHours()).slice(-2);
            let minute = ("00" + time.getMinutes()).slice(-2);
            let second = ("00" + time.getSeconds()).slice(-2);
            let timeStr = hour + minute + second;
            return timeStr;
        },
    },
    mounted() {
        this.timeRunner = setInterval(() => {
            this.timeStr = this.getTimeStr();
        }, 1000);
    },
    unmounted() {
        clearInterval(this.timeRunner);
        this.timeRunner = null;
    },
};
</script>

<style lang="less" scoped>
.exmple-box {
    width: 500px;
    --width: 60px;
    --backgroundColor: #333;
    --color: #ccc;
    --time: 1s;
    --height: calc(var(--width) * 1.5);
    --fontSize: calc(var(--width) * 1.3);
    --lineWidth: calc(var(--width) / 60);
    --radius: calc(var(--width) / 10);
    --perspective: calc(var(--width) * 5);
    --gap: calc(var(--width) * 0.2);
    .flip-container {
        display: flex;
        justify-content: center;
        padding: 0 20px;
        position: relative;
        .flip-items {
            position: relative;
            width: var(--width);
            height: var(--height);
            font-size: var(--fontSize);
            font-weight: bold;
            border-radius: var(--radius);
            box-shadow: 0 2px 18px rgba(0, 0, 0, 0.7);
            &:nth-of-type(2n + 1) {
                margin-right: var(--gap);
            }
            &:nth-of-type(2),
            &:nth-of-type(4) {
                margin-right: calc(var(--gap) * 3);
                &::after,
                &::before {
                    position: absolute;
                    right: calc(-(var(--gap) / 2));
                    content: "";
                    transform: translateX(50%);
                    width: calc(var(--gap) / 1.5);
                    height: calc(var(--gap) / 1.5);
                    border-radius: 50%;
                    background-color: var(--backgroundColor);
                }
                &::before {
                    top: 25%;
                }
                &::after {
                    bottom: 25%;
                }
            }
            .item {
                z-index: 1;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                perspective: var(--perspective);
                &:before {
                    content: "";
                    position: absolute;
                    top: calc((var(--height) - var(--lineWidth)) / 2);
                    left: 0;
                    z-index: 9;
                    width: 100%;
                    height: var(--lineWidth);
                    min-height: 2px;
                    background-color: rgba(0, 0, 0, 0.6);
                }
                .up,
                .down {
                    position: absolute;
                    left: 0;
                    right: 0;
                    height: 50%;
                    overflow: hidden;
                }
                .up {
                    transform-origin: 50% 100%;
                    top: 0;
                }
                .down {
                    transform-origin: 50% 0%;
                    bottom: 0;
                }
                .inner {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: var(--height);
                    line-height: var(--height);
                    color: var(--color);
                    text-shadow: 0 2px 4px #000;
                    text-align: center;
                    background-color: var(--backgroundColor);
                    border-radius: var(--radius);
                }
                .up .inner {
                    top: 0;
                }
                .down .inner {
                    bottom: 0;
                }
                .up .shadow {
                    border-top-left-radius: var(--radius);
                    border-top-right-radius: var(--radius);
                }
                .down .shadow {
                    border-bottom-left-radius: var(--radius);
                    border-bottom-right-radius: var(--radius);
                }
            }
        }
        .flip-items .item {
            &.past {
                z-index: 3;
            }
            &.current {
                animation: highter-level calc(var(--time) / 2)
                    calc(var(--time) / 2) linear forwards;
                z-index: 2;
            }
            &.past .up {
                animation: flip-past-up calc(var(--time) / 2) linear both;
            }
            &.current .down {
                animation: flip-current-down calc(var(--time) / 2)
                    calc(var(--time) / 2) linear both;
            }
            @keyframes flip-current-down {
                from {
                    transform: rotateX(90deg);
                }
                to {
                    transform: rotateX(0deg);
                }
            }
            @keyframes flip-past-up {
                from {
                    transform: rotateX(0deg);
                }
                to {
                    transform: rotateX(-90deg);
                }
            }
            @keyframes highter-level {
                from {
                    z-index: 4;
                }
                to {
                    z-index: 4;
                }
            }
        }
        .flip-items .item {
            .shadow {
                position: absolute;
                width: 100%;
                height: 100%;
            }
            &.past .up .shadow {
                background: linear-gradient(
                    rgba(0, 0, 0, 0.1) 0%,
                    rgba(0, 0, 0, 1) 100%
                );
                animation: show calc(var(--time) / 2) linear both;
            }
            &.past .down .shadow {
                background: linear-gradient(
                    rgba(0, 0, 0, 1) 0%,
                    rgba(0, 0, 0, 0.1) 100%
                );
                animation: show calc(var(--time) / 2) linear both;
            }
            &.current .up .shadow {
                background: linear-gradient(
                    rgba(0, 0, 0, 0.1) 0%,
                    rgba(0, 0, 0, 1) 100%
                );
                animation: hide calc(var(--time) / 2) 0.3s linear both;
            }
            &.current .down .shadow {
                background: linear-gradient(
                    rgba(0, 0, 0, 1) 0%,
                    rgba(0, 0, 0, 0.1) 100%
                );
                animation: hide calc(var(--time) / 2) 0.3s linear both;
            }
        }
        @keyframes show {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        @keyframes hide {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }
    }
}
</style>
